<template>
  <!-- 面包屑 -->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item>商品管理</el-breadcrumb-item>
    <el-breadcrumb-item>商品列表</el-breadcrumb-item>
  </el-breadcrumb>

  <div class="content">
    <!-- 搜索框 -->
    <el-row :gutter="20">
      <el-col :span="5">
        <el-input v-model="ipt" size="large" placeholder="请输入内容" clearable @clear="init(pageNow, pageSize)">
          <template #append>
            <el-button :icon="Search" @click="init(pageNow, pageSize)"/>
          </template>
        </el-input>
      </el-col>

      <el-col :span="4">
        <el-button type="primary" size="large" @click="router.push('/addGoods')">添加商品</el-button>
      </el-col>
    </el-row> 
    
    <!-- 表格 -->
    <Tables :tableData="tableData" :total="total" @init="init" :pageNow="pageNow" :pageSize="pageSize" @saveID="saveID" @showEditDialog="showEditDialog"></Tables>

    <!-- 分页 -->
    <el-config-provider :locale="zhCn" >
      <el-pagination class="goodsPagination" v-model:current-page="pageNow" v-model:page-size="pageSize" :page-sizes="[2, 5, 10]"
        layout="sizes,jumper,total,next,pager,prev" :total="total" @size-change="sizeChange" @current-change="currentChange"
      />
    </el-config-provider>
  </div>

  <!-- 修改商品信息盒子 -->
  <EditProduct :editDialog="editDialog" @init="init" :pageNow="pageNow" :pageSize="pageSize" :productID="productID" @showEditDialog="showEditDialog"/>
</template>

<script lang="ts" setup>
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { onMounted, ref } from 'vue'
import { GetGoodsFnc } from '@/api/goods'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

import Tables from './components/Table/IndexView.vue'
import EditProduct from './components/Edit/IndexView.vue'

const router = useRouter()
const ipt = ref('') // 搜索框
const tableData = ref([]) // table数据源
const total = ref(0) // 表格总数
const pageNow = ref(1) // 当前页
const pageSize = ref(2) // 每页条数
const editDialog = ref(false) // 修改商品的盒子
const productID = ref(0) // 商品的ID

// 数据初始化
const init = async (pageNow: number, pageSize: number) => {
  const res = await GetGoodsFnc({ query: ipt.value, pagenum: pageNow, pagesize: pageSize })
  if(res.data.meta.status === 200) {
    tableData.value = res.data.data.goods
    total.value = res.data.data.total
  }
}
onMounted(() => init(pageNow.value, pageSize.value))

// 更改每页条数
const sizeChange = (value: number) => {
  init(pageNow.value, value)
}

// 切换页码
const currentChange = (value: number) => {
  init(value, pageSize.value)
}

// 编辑商品盒子
const showEditDialog = (flag: boolean) => {
  editDialog.value = flag
}

// 商品ID
const saveID = (id: number) => {
  productID.value = id
}

</script>


<style lang="scss" scoped>
.content{
  margin-top: 20px;
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #EBEEF5;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .goodsPagination{
    display: flex;
    flex-direction: row-reverse;
    margin-top: 20px;
  }
}
</style>